﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1, maximum-scale=1" />

    <title>Jz JavaScript Popup</title>

    <style>
        a {
            color: #337ab7;
            text-decoration: none;
        }

            a:hover {
                text-decoration: underline;
            }


        .main {
            color: #333;
            margin: auto;
            outline: none;
            font-size: 15px;
            max-width: 720px;
            box-sizing: border-box;
            font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
        }

        .pa a {
            font-weight: 600;
            font-size: 1.2em;
            margin-right: 15px;
            text-decoration: none;
            border: 2px solid transparent;
        }

            .pa a:hover {
                color: #099;
                border-bottom-color: #28a745;
            }

        .ultype {
            padding: 0;
            margin: 20px;
            font-size: 16px;
            line-height: 1.5;
        }

        .citem {
            position: relative;
            word-wrap: break-word;
            word-break: break-word;
        }

            .citem p {
                color: #009a61;
                margin: 30px 0 5px;
            }

            .citem pre {
                margin: 0;
                color: #333;
                padding: .75em;
                line-height: 1.4;
                font-weight: 400;
                border-radius: 4px;
                white-space: pre-wrap;
                border: 1px solid #ddd;
                background-color: #f8f8f8;
            }

            .citem button {
                position: absolute;
                right: 0;
                bottom: 0;
                color: #fff;
                outline: none;
                font-size: 15px;
                cursor: pointer;
                line-height: 1.5;
                border-radius: 4px;
                padding: 0.5em 0.8em;
                border: 1px solid #009a61;
                background-color: #009a61;
            }

                .citem button:hover {
                    border-color: #0fc17f;
                    background-color: #0fc17f;
                }


        /*返回顶部*/
        .totop {
            position: fixed;
            z-index: 2;
            right: 15px;
            bottom: 80px;
            height: 35px;
            font-size: 3em;
            padding: 0 8px;
            font-weight: 600;
            border-radius: 6px;
            text-align: center;
            border: 1px solid #ddd;
            line-height: 1.42857143;
            color: #009a61 !important;
            text-decoration: none !important;
            background-color: rgba(217, 217, 217, .5);
            opacity: .4;
            filter: alpha(opacity=40);
            font-family: 'Microsoft YaHei';
        }

            .totop:hover {
                color: white !important;
                background-color: #009a61;
            }
    </style>
</head>
<body>
    <div class="main" id="main">
        <h1>Jz JavaScript Popup v2.0.1</h1>

        <p class="pa">
            <a href="https://github.com/netnr" style="color:#28a745;">https://github.com/netnr</a>
        </p>

        <p style="color:red;font-weight:600;">相对2.0.0，仅仅调整了皮肤</p>

        <ul class="ultype">
            <li>
                <a href="#popup-alert">jz.alert</a> 弹出提示
            </li>
            <li>
                <a href="#popup-msg">jz.msg</a> 气泡消息
            </li>
            <li>
                <a href="#popup-confirm">jz.confirm</a> 询问
            </li>
            <li>
                <a href="#popup-iframe">jz.iframe</a> 子页面
            </li>
            <li>
                <a href="#popup-tip">jz.tip</a> 气泡提示
            </li>
            <li>
                <a href="#popup-doc">文档</a>
            </li>
        </ul>

        <hr style="margin:30px auto" />
        <div class="citem">
            <pre>引入 jz.js，样式自动载入</pre>
        </div>

        <div class="citem" id="popup-alert">
            <p>jz.alert 弹出提示</p>
            <pre>jz.alert("hello world");</pre>
            <button>运行</button>
        </div>

        <div class="citem">
            <p>jz.alert 弹出提示 定位，0-9，重复点击看效果</p>
            <pre>
jz.alert({
    //内容
    content: "定位，0-9 重复点击看效果",
    //空白关闭
    blank: true,
    //按钮文字
    okValue:"朕知道了",

    /*
        1-9数字键盘的位置对应屏幕的位置，0不定位（仅初始化居中）
        1左下角，2底部居中，3右下角，
        4垂直居左，5水平垂直居中，6垂直居右，
        7左上角，8顶部居中，9右上角

        7 8 9
        4 5 6
        1 2 3
    */
    align: Math.ceil(Math.random()*10)-1
})
</pre>
            <button>运行</button>
        </div>

        <div class="citem">
            <p>jz.alert 弹出提示 事件</p>
            <pre>
jz.alert("hello world " + (new Date()).valueOf(),{
    //确定事件
    ok: function(){
        jz.msg("ok回调")
    },
    //关闭
    close: function(){
        jz.msg('close回调')
    },
    //移除
    remove: function(){
        jz.msg('remove回调',{align:8,single:false})
    }
})
</pre>
            <button>运行</button>
        </div>

        <div class="citem">
            <p>jz.alert 弹出提示 倒计时、不透明度、按钮文字、阻止关闭、不显示关闭按钮</p>
            <pre>
jz.alert({
    //标题
    title: "阻止关闭",
    content: "hello world " + (new Date()).valueOf(),
    //倒计时自动关闭
    time: 5,
    //启用遮罩层，0-1的不透明度
    mask: .5,
    //阻止关闭
    ok: function(){
        jz.msg("阻止关闭");
        return false;
    },
    //不显示关闭按钮
    close: false
})
</pre>
            <button>运行</button>
        </div>

        <div class="citem" id="popup-msg">
            <p>jz.msg 气泡消息</p>
            <pre>jz.msg("hello world "+ (new Date()).valueOf())</pre>
            <button>运行</button>
        </div>

        <div class="citem">
            <p>jz.msg 气泡消息 定位 遮罩层</p>
            <pre>
jz.msg({
    content: "hello world " + (new Date()).valueOf(),
    mask: .05, //遮罩层不透明度
    align: 8, //顶部居中
    time: 8, //倒计时
    blank: true, //空白关闭
    fixed: true, //绝对定位（固定顶部）
    drag: true,   //拖拽
    width:"50%" //宽度
})
</pre>
            <button>运行</button>
        </div>

        <div class="citem" id="popup-confirm">
            <p>jz.confirm 询问 确定，取消、关闭回调</p>
            <pre>
jz.confirm("hello world " + (new Date()).valueOf(),{
    //确定
    ok: function(){
        jz.msg("ok")
    },
    //取消
    cancel: function(){
        jz.msg("cancel")
    },
    //关闭
    close: function(){
        jz.msg("close")
    }
})
</pre>
            <button>运行</button>
        </div>

        <div class="citem" id="popup-iframe">
            <p>jz.iframe 子页面</p>
            <pre>
jz.iframe({
    src: "https://ss.js.org/"
})
</pre>
            <button>运行</button>
        </div>

        <div class="citem">
            <p>jz.iframe 子页面 滚动条、宽高，定位，遮罩层</p>
            <pre>
jz.iframe({
    title: "站点标题",
    src: "https://ss.js.org/",
    //宽度，不带单位默认为PX
    width: "350px",
    //高度，支持百分比
    height: "90%",
    //有滚动条
    scrolling: true,
    //定位方式
    align: 5,
    //不透明度
    mask: .6,
    //空白关闭
    blank: true,
    //非绝对定位
    fixed: false
})
</pre>
            <button>运行</button>
        </div>

        <div class="citem">
            <p>jz.iframe 子页面 无标题、全屏</p>
            <pre>
jz.iframe({
    title: false,
    src: "https://ss.js.org/",
    width: "100%",
    height: "100%",
    //倒计时关闭
    time: 5,
    scrolling: true
})
</pre>
            <button>运行</button>
        </div>

        <div class="citem">
            <p>jz.iframe 子页面 传值、关闭</p>
            <input type="text" id="txtPv" placeholder="此处接收弹窗返回的值" style="float:right;width:30%;padding:.3em;outline:none;" />
            <pre>
jz.iframe({
    src: "iframe.html"
})
</pre>
            <button id="btnPv">运行</button>
        </div>

        <div class="citem" id="popup-doc">
            <p>文档</p>
            <pre>
Jz JavaScript Popup

参数列表：
     
title：标题    text/html/false     false不显示标题
content：文本信息    text/html（jz.iframe不传）
footer：底部按钮包    bool    false不显示
time：倒计时关闭 单位（秒）     number（jz.msg默认4秒）
blank：点击空白关闭    bool（默认false）     
mask：遮罩层    true、false、0-1不透明度
fixed：绝对位置  bool（position:fixed）    即启用不受滚动条影响
align： 对齐方式 数字键盘1-9，默认5水平垂直，false、0忽略对齐（仅初始化居中）
single：只弹出一个    bool
drag：拖动     bool（jz.msg默认false）     
ok：确定回调     function/false（确定回调/不显示确定按钮）
okValue：确定按钮文本
cancel：取消回调  function/false（取消回调/不显示取消按钮）     
cancelValue：取消按钮文本
close：窗口关闭回调    function/bool（关闭回调/不显示，有标题时）
remove：移除回调  function
src：弹窗地址    text（jz.iframe用）
width：弹窗宽度 如"400px"、"40em"、"90%"，百分比或固定的单位值
height： 弹窗高度 如"400px"、"40em"、"90%"，百分比或固定的单位值
scrolling： iframe是否有滚动条    bool（默认false）
    
popup为基方法，msg、alert、confirm、iframe都基于popup提供支持，popup返回整个弹窗对象
popup.fn为拓展，涵盖对象、方法


得到弹窗的所有信息：对象、方法
var jzart = jz.alert("hello world");
console.log(jzart.fn);

对象：
jzart.fn.global：弹窗整个对象
jzart.fn.obj：调用弹窗时传的参数
jzart.fn.body：弹窗内容主体
jzart.fn.zindex：Z轴层叠高度，构成弹窗ID的标识
jzart.fn.mask：遮罩层，遮罩层的ID是jzart.fn.zindex-1，层叠顺序要低于弹窗对象

思维拓展：
给jzart.fn.body对象添加类样式，就实现了自定义样式

方法：
jzart.fn.hide()：隐藏弹窗
jzart.fn.show()：显示弹窗
jzart.fn.remove()：移除弹窗
</pre>
        </div>

        <hr style="margin:30px auto" />

        <div class="citem" id="popup-tip">
            <p>
                jz.tip 气泡提示
                <select id="seTip" style="margin-left:20%;font-size:16px;">
                    <option value="">（选择方向）</option>
                    <option value="top"> 上 </option>
                    <option value="right"> 右 </option>
                    <option value="bottom"> 下 </option>
                    <option value="left"> 左 </option>
                </select>
            </p>
            <pre>
jz.tip({
    //目标：#ID 或 Element
    target: "#seTip",
    content: "hello world " + (new Date()).valueOf(),
    blank: true,
    //焦点选中target对象，即focus效果，方便输入框提示用
    focus: true,
    //倒计时关闭，单位：秒
    time: 8,
    //方向 可选：top|right|bottom|left，默认bottom
    align: "top"
});
</pre>
            <button id="btnTip">运行</button>
        </div>

        <div class="citem">
            <p>文档</p>
            <pre>
tip小提示 
     
参数列表：

target：#id/Element
content：提示信息    text/html
single：只弹出一个    bool
time：倒计时关闭 单位：秒     number（默认不关闭）
blank：点击空白关闭    bool（默认false）
focus：焦点选中目标    bool（默认false）
</pre>
        </div>

    </div>

    <a href="javascript:void(0);" onclick="window.scrollTo(0,0)" class="totop" title="返回顶部">ˆ</a>

    <script src="jz.js"></script>

    <script>
        var mn = document.getElementById('main');
        mn.onclick = function (e) {
            e = e || window.event;
            var target = e.target || e.srcElement;
            if (target.nodeName == "BUTTON") {
                var arr = [];
                while (target && target.nodeType != 9 && arr.length == 0) {
                    target = target.previousSibling;
                    target.nodeType == 1 && arr.push(target);
                }
                if (arr.length) {
                    var ih = "innerHTML" in document.createElement('div');
                    eval(ih ? arr[0].innerText : arr[0].textContent);
                }
            }
        }

        document.getElementById("seTip").onchange = function () {
            jz.tip({
                target: "#seTip",
                content: new Date().valueOf(),
                single: false,
                time: 6,    //倒计时关闭
                align: this.value
            });
        }


        jz.each(document.getElementsByTagName('pre'), function () {
            this.setAttribute('contenteditable', true);
        });

        var pdoc = document.getElementById('popup-doc').getElementsByTagName('pre')[0];
        pdoc.innerHTML = pdoc.innerHTML.replace(/.*?\：/g, function (value) {
            return '<span style="color:#009a61">' + value + '</span>';
        });

    </script>
</body>
</html>